import {createRouter,createWebHashHistory} from "vue-router"


const Home =()=>import ("../views/Home.vue")
const About =()=>import ("../views/About.vue")

const UserCenter =()=>import ("../views/user-center/index.vue")
const UserProfile =()=>import ("../views/user-center/Profile.vue")
const UserSettings =()=>import ("../views/user-center/Settings.vue")

const NotFound = () => import("../views/404.vue")

const VuePage = () => import("../views/Vuex.vue")



const routes =[
    {
        path:'/',
        redirect:'/home'
    },
    {
        path:'/home',
        name:'home',
        component: Home
    },
    {
        path:'/about',
        name:'about',
        component: About
    },
    {
        path:'/user',
        name:'userCenter',
        component: UserCenter,
        redirect:'/user/profile',
        children:[
            {
                path:'profile',
                name:'profile',
                component: UserProfile
            },
            {
                path:'settings',
                name:'settings',
                component: UserSettings
            }
        ]
    },
   
    {
        path:'/vuex',
        name:'vuex',
        component:VuePage
    },

    {
        path:'/:pathMatch(.*)*',
        name:'notFound',
        component:NotFound
    }
]

const router =createRouter({
    history: createWebHashHistory(),
    routes
})

// router.beforeEach((to,from,next)=>{
//     console.log('beforEach to',to);
//     console.log('beforEach from',from);
//     next()
// })
// router.afterEach((to,from)=>{
//     console.log('afterEach to',to);
//     console.log('afterEach from',from);
// })
 export default router
